<template>
  <div class="login wf hf y jc zc">
    <div class="wf ycc content">
      <h3 class="first-child">用户登入</h3>
      <el-form ref="form1" :model="data" :rules="rules" label-width="5em" style="width:20em">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="data.username" clearable @keydown.enter="focusPassword" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="data.password" ref="pass" clearable show-password @keydown.enter="login" />
        </el-form-item>
      </el-form>
      <div class="wf x zb mt1em">
        <button class="btn btn-primary" style="min-width: 6em;" @click="login">登入</button>
        <button class="btn btn-default" style="min-width: 6em;" @click="showDialog = true">注册</button>
        <button class="btn btn-default" style="min-width: 6em;" @click="forget">忘记密码</button>
      </div>
    </div>
    <el-dialog v-model="showDialog" title="注册用户" label-width="5em" style="width:20em" @opened="reset">
      <el-form ref="form2" :model="data" :rules="rules">
        <el-form-item label="昵称" prop="name"> <el-input v-model="data.name" clearable /> </el-form-item>
        <el-form-item label="用户名" prop="username"> <el-input v-model="data.username" clearable /> </el-form-item>
        <el-form-item label="密码" prop="password"> <el-input v-model="data.password" clearable show-password />
        </el-form-item>
        <el-form-item label="校验密码" prop="repass"> <el-input v-model="data.repass" clearable show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="reg">确定注册</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from "vue";
  export default defineComponent({
    name: "login",
    components: {},
    data() {
      return {
        data: {
          name: "昵称",
          username: "",
          password: "",
          repass: "",
        },
        rules: {
          username: { required: true, trigger: "blur", min: 5, max: 16, message: "用户名长度在:5-16" },
          password: { required: true, trigger: "blur", min: 5, max: 16, message: "密码长度在:5-16" },
          repass: undefined
        } as any,
        showDialog: false,
      };
    },
    created() { this.init(); },
    methods: {
      init() {
        this.rules.repass = {
          required: true, trigger: "blur", validator: (_: any, v: any, c: any) => {
            if (this.data.password == v) {
              c();
            }
            c(new Error("校验密码必须与密码一致"));
          }
        };
        // uni.clearStorageSync();
        sessionStorage.clear();
        localStorage.clear();
      },
      login() {
        (this.$refs.form1 as any).validate(async (v: any) => {
          if (v) {
            await api.login(this.data);
            await this.$router.replace("/");
          }
        });
      },
      reg() {
        (this.$refs.form2 as any).validate((v: any) => {
          if (v) {
            api.reg(this.data).then(() => {
              this.$router.replace("/");
            });
          }
        });
      },
      reset() {
        (this.$refs.form2 as any).resetFields();
      },
      forget() { },
      focusPassword() {
        // @ts-ignore
        this.$refs.pass.focus();
      }
    },
  });
</script>
<style lang="scss" scoped>
  .login {
    width: 100vw;
    height: 100vh;
    background-color: skyblue;
    animation: sky 20s linear infinite;

    >.content {
      width: 30em;
      border: 1px solid #fff;
      box-shadow: 0 0 10px 5px white;
      border-radius: 10px;
      padding: 1em;
      background-color: #eee3;

      >h3 {
        margin-bottom: 1em;
      }
    }
    >.cloud_one {
      width: 300%;
      height: 600px;
      margin: 30px auto;
      /* background: url(https://i.hd-r.cn/04462965ba09f768e47b6ea8cb065b1c.png) repeat-x; */
      position: fixed;
      left: 0;
      top: 0;
      animation: cloud 20s linear infinite;
    }
    >.cloud_two {
      width: 300%;
      height: 600px;
      margin: 30px auto;
      /* background: url(https://s3.bmp.ovh/imgs/2023/06/10/dc7235f6f0a978b5.png) repeat-x; */
      position: fixed;
      left: 0;
      top: 0;
      animation: cloud 40s linear infinite;
    }
    >.cloud_three {
      width: 300%;
      height: 600px;
      margin: 30px auto;
      /* background: url(https://s3.bmp.ovh/imgs/2023/06/10/8201e7f468f3570c.png) repeat-x; */
      position: fixed;
      left: 0;
      top: 0;
      animation: cloud 60s linear infinite;
    }
  }
  @keyframes sky {
    0% {
      background-color: skyblue;
    }

    50% {
      background-color: #000;
    }

    100% {
      background-color: skyblue;
    }
  }
  @keyframes cloud {
    from {
      left: 0;
    }
    to {
      left: -200%;
    }
  }
</style>